import {Form, Input, Select, DatePicker, Modal} from 'antd';
import React from 'react';
const { Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
const { TextArea } = Input;

const AddForm = Form.create({ name: 'add_modal' })(
class Search extends React.Component {
    state = {
        startDate: "2019-01-01",
        endDate: "2019-12-01",
    };
    onRangeChange = (date,dateString) => {
        this.setState({
            startDate: dateString[0],
            endDate: dateString[1],
        });
    };
    getStartDate(){
        return this.state.startDate;
    }
    getEndDate(){
        return this.state.endDate;
    }
    render() {
        const { visible, onCancel, onCreate} = this.props;
        const { getFieldDecorator } = this.props.form;
        return (
            <Modal
                visible={visible}
                title="新增"
                okText="Create"
                onCancel={onCancel}
                onOk={onCreate}
            >
            <Form layout="inline">
                <Form.Item label="物料描述">
                    {getFieldDecorator('itemDescription', {
                        required: true,
                    })(<TextArea
                        style={{width:250}}
                        placeholder="物料描述"
                        autosize={{ minRows: 2, maxRows: 6 }}
                    />)}
                </Form.Item>
                <Form.Item label="物料单位">
                    {getFieldDecorator('itemUom', {
                        required: true,
                    })(<Select style={{width:90}}>
                        <Option value="米">米</Option>
                        <Option value="平方米">平方米</Option>
                        <Option value="立方米">立方米</Option>
                        <Option value="千克">千克</Option>
                        <Option value="个">个</Option>
                        <Option value="其他">其他</Option>
                    </Select>)}
                </Form.Item>
                <Form.Item label="生效周期">
                    {getFieldDecorator('activePeriod', {
                        required: true,
                    })(<RangePicker
                        onChange={this.onRangeChange}
                        format={dateFormat} style={{}}/>)}
                </Form.Item>
                <Form.Item label="是否启用">
                    {getFieldDecorator('enabledFlag', {
                        required: true,
                    })(<Select style={{width:90}}>
                        <Option value='1'>是</Option>
                        <Option value='0'>否</Option>
                    </Select>)}
                </Form.Item>
            </Form>
            </Modal>
        );
    }
}
);

export default AddForm;
